<template>
  <div class="grand-child">
    <h3>我是孙组件</h3>
    <h4>爷爷给的古董：{{ virtu }}个</h4>
    <h4>爷爷给的豪车：{{ y.brand }}，价格：{{ y.price }}万</h4>
    <button @click="giveVirtu(1)">卖古董</button>
  </div>
</template>

<script setup lang="ts" name="GrandChild">
import { inject } from "vue";

let { virtu, giveVirtu } = inject("古董", {
  virtu: 0,
  giveVirtu: (value: number) => {},
});
//前面是对象，后面是默认值，通过默认值告诉TS，这是个对象，且里面有brand和price两个属性
let y = inject("豪车", { brand: "未知", price: 0 });
</script>

<style scoped>
.grand-child {
  background-color: orange;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px black;
}
</style>